class DottedBackground {
  paint(ctx, geom) {
    const { width, height } = geom
    ctx.fillStyle = '#f5f5f5'
    ctx.fillRect(0, 0, width, height)

    ctx.fillStyle = '#d1d1d1'
    for (let x = 0; x < width; x += 20) {
      for (let y = 0; y < height; y += 20) {
        ctx.beginPath()
        ctx.arc(x, y, 1, 0, 2 * Math.PI)
        ctx.fill()
      }
    }
  }
}
registerPaint('dotted-bg', DottedBackground)
